import React, { Component } from 'react'
//导入全局css样式
import '../assets/css/Cart.css'
import Header from "../components/DefaultHeader"

//导入图片
import img01 from '../assets/imgs/pic/01.png'
export default class Cart extends Component {
    render() {
        return (
            <div id='cart'>
                <div className="container">
                    <Header title='购物车'/>
                    <ul className="cart-list">
                        <li>
                            <input type="checkbox" />
                            <img src={img01} alt="" />
                            <div>
                                <h5>小米10</h5>
                                <h5 className="price">
                                    &yen;3999
                        <span className="market-price">&yen; 49999</span>
                                </h5>
                            </div>
                            <div className="stepper">
                                <button>-</button>
                                <span>2</span>
                                <button>+</button>
                            </div>
                        </li>
                        <li>
                            <input type="checkbox" />
                            <img src={img01} alt="" />
                            <div>
                                <h5>小米10</h5>
                                <h5 className="price">
                                    &yen;3999
                        <span className="market-price">&yen; 49999</span>
                                </h5>
                            </div>
                            <div className="stepper">
                                <button>-</button>
                                <span>2</span>
                                <button>+</button>
                            </div>
                        </li>
                        <li>
                            <input type="checkbox" />
                            <img src={img01} alt="" />
                            <div>
                                <h5>小米10</h5>
                                <h5 className="price">
                                    &yen;3999
                        <span className="market-price">&yen; 49999</span>
                                </h5>
                            </div>
                            <div className="stepper">
                                <button>-</button>
                                <span>2</span>
                                <button>+</button>
                            </div>
                        </li>
                    </ul>
                    <div className="submit-bar">
                        <label><input type="checkbox" /> 全选</label>
                        <div className="price">订单总金额: &yen; 7999</div>
                        <button className="btn-order">去结算(2件)</button>
                    </div>
                    {/* 底部导航  */}
                    <ul className="tabbar">
                        <li className="icon icon-home">
                            商城
                        </li>
                        <li className="icon icon-cate">
                            分类
                        </li>
                        <li className="icon icon-cart">
                            <span className="badge">5</span>
                            购物车
                        </li>
                        <li className="icon icon-user">
                            我的
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}
